<template>
  <div>
    <div class="pagebg ab"></div>
    <div class="container">
      <h1 class="t_nav">
        <span>让努力变成一种习惯</span>
        <a href="/" class="n1">网站首页</a>
        <a href="javascript:void(0);" class="n2">归档</a>
      </h1>

      <div class="sortBox">
        <div class="time">
          <div class="block">
            <div class="radio" style="margin-bottom:20px;">
              <el-switch
                v-model="reverse"
                active-text="倒序"
                inactive-text="正序"
                active-color="#000000"
                inactive-color="#13ce66"
              ></el-switch>
            </div>
            <el-timeline :reverse="reverse">
              <el-timeline-item v-for="(activity, index) in activities" hide-timestamp :key="index">
                <span
                  @click="clickTime(activity.content)"
                  :class="[activity.content == selectContent ? 'sortBoxSpan sortBoxSpanSelect' : 'sortBoxSpan']"
                >{{activity.content}}</span>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div class="article">
          <div class="block">
            <el-timeline>
              <el-timeline-item
                v-for="item in itemByDate"
                :key="item.timestamp"
                :timestamp="item.createTime"
                placement="top"
              >
                <el-card>
                  <h4 class="itemTitle" @click="to(item.uid)">{{item.title}}</h4>
                  <br />
                  <el-tag class="elTag" type="danger">原创</el-tag>

                  <el-tag class="elTag">{{item.author}}</el-tag>
                  <el-tag class="elTag" type="success">{{item.blogSort.blorSortName}}</el-tag>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reverse: true, //true倒序
      activities: [],
      blogs: [],
      itemByDate:[],
      selectContent: ""
    };
  },
  methods:{
      clickTime(content){
        this.itemByDate=[]
          for(let i=this.blogs.length-1;i>=0;i--){
              if(this.blogs[i].createTime.indexOf(content.replace("年","-").replace("月","-"))>-1){
                  this.itemByDate.push(this.blogs[i])
              }
          }
          this.selectContent=content
      },
      to(blogUid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: { blogUid }
      });
      window.open(routeData.href, "_blank");
    }
  },
  mounted() {
    let session = window.localStorage;
    let blogs = JSON.parse(session.getItem("blogs"));
    if (blogs == null) {
        blogs=[]
      session.setItem("blogs", JSON.stringify(blogs));
      return;
    }
    this.blogs=blogs
    for (let i = 0; i < blogs.length; i++) {
      let createTime = blogs[i].createTime;
      let index = createTime.indexOf(" "); 
      let content=createTime.substring(0, 4)+"年"+createTime.substring(5,6)+"月"
      let activitie = {
        content,
        timestamp: createTime.substring(index + 1, createTime.length)
      };
      let flag=false
      for(let j=0;j<this.activities.length;j++){
        if(this.activities[j].content==content){
          flag=true
        }
      }
      if(!flag){this.activities.push(activitie)};
    }
    this.selectContent = this.activities[this.activities.length - 1].content;
    this.clickTime(this.selectContent)
  }
};
</script>

<style>
.sortBox {
  color: #555;
}

.sortBoxSpan {
  cursor: pointer;
}
.sortBoxSpan:hover {
  color: #409eff;
}
.sortBoxSpanSelect {
  color: #409eff;
}

.itemTitle {
  cursor: pointer;
}
.itemTitle:hover {
  color: #409eff;
}
.elTag {
  cursor: pointer;
}
</style>